<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <el-input style="width: auto"
              placeholder="请输入桶名称"
              v-model="bucketName"
              clearable>
    </el-input>
    <p></p>

    <el-row>
      <el-button type="primary" @click="submit1()">创建桶</el-button>
      <el-button type="primary" @click="submit2()">删除桶</el-button>
      <el-button type="primary" @click="submit3()">验证桶存在</el-button>
      <el-button type="primary" @click="submit4()">获取桶列表</el-button>
    </el-row>

    <p>{{data}}</p>

  </div>
</template>

<script>


  var OSS = require("oss-js-client");

  // Instantiate the OSS client with the endpoint
  var ossClient = new OSS.Client({
    endPoint: "127.0.0.1",
    // endPoint: "192.168.1.40",
    port: 9000,
    useSSL: false,
    accessKey: "username",
    secretKey: "password",
  });

  export default {
    name: "VueOSSBucket",
    data() {
      return {
        bucketName: "mybucket2",
        data: '',
        msg: "演示OSSClient-Bucket桶操作",
      };
    },
    methods: {

      submit1: function () {
        //创建桶 存在则抛异常
        ossClient.makeBucket(this.bucketName, (err) => {
          if (err) {
            this.data = err
            return console.log("Error creating bucket.", err);
          }

          this.data = "Bucket created successfully!"
          console.log('Bucket created successfully in "us-east-1".');
        });
      },

      submit2: function () {
        //删除桶 只能删除空桶
        ossClient.removeBucket(this.bucketName, (err) => {
          if (err) {
            this.data = err
            return console.log('unable to remove bucket.')
          }

          this.data = "Bucket removed successfully!"
          console.log('Bucket removed successfully.')
        });

      },

      submit3: function () {
        //判断桶 不存在抛异常
        ossClient.bucketExists(this.bucketName, (err, exists) => {
          if (err) {
            this.data = err
            return console.log(err)
          }
          if (exists) {
            this.data = exists
            return console.log('Bucket exists.')
          }
        });

      },

      submit4: function () {
        //所有桶列表
        ossClient.listBuckets((err, buckets) => {
          if (err) {
            this.data = err;
            return console.log(err)
          }

          this.data = buckets
          console.log('buckets :', buckets)
        });
      },

    },
  };
</script>

<style scope>
</style>
